<template>
  <div class="q-pa-md">
    <t-form @submit="onSubmit" class="q-gutter-md">
      <t-date name="wedding" v-model="date" />

      <div>
        <t-btn label="Submit" type="submit" color="primary" />
      </div>
    </t-form>

    <t-card
      v-if="submitResult.length > 0"
      flat
      bordered
      class="q-mt-md"
      :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
    >
      <t-card-section
        >Submitted form contains the following formData (key =
        value):</t-card-section
      >
      <t-separator />
      <t-card-section class="row q-gutter-sm items-center">
        <div
          v-for="(item, index) in submitResult"
          :key="index"
          class="q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
          >{{ item.name }} = {{ item.value }}</div
        >
      </t-card-section>
    </t-card>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const submitResult = ref([]);

      return {
        date: ref('2020/03/20'),
        submitResult,

        onSubmit(evt) {
          const formData = new FormData(evt.target);
          const data = [];

          for (const [name, value] of formData.entries()) {
            data.push({
              name,
              value,
            });
          }

          submitResult.value = data;
        },
      };
    },
  };
</script>
